<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
			<view class="section-0">
				<view class="section-body">
					<view class="tab">
						<view @click="setCurIdx(idx, item.name)"
							:class="`item ${curName === item.name ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`"
							v-for="(item, idx) in tabList" :key="item.id">
							<view class="label">
								{{item.name}}
								<text v-show="curName==item.name" >{{total}}</text>
							</view>
							<view class="shape">
								<view class="shape-body"></view>
							</view>
							<view class="shape shape-mirrow">
								<view class="shape-body"></view>
							</view>
						</view>
					</view>
					<view class="list">
						<view class="listItem" v-for="(item,index) in listage" :key='item.id' @click="Jump(item)">
							<view class="ItemTop">
								{{index+1}}.{{item.work_type}}
							</view>
							<view class="ItemBottm">
								<view class="">
									<view class="ItemBottmchild">
										<text class="left">计划开始: {{item.start_time?item.start_time.substring(0, 10): '--'}}</text>
										<text class="right">实际开始: {{item.start_time_real?item.start_time_real.substring(0, 10): '--'}}</text>
									</view>
								</view>
								<view class="">
									<view class="ItemBottmchild">
										<text class="left">计划结束: {{ item.end_time ? item.end_time.substring(0, 10) : '--'}}</text>
										<text class="right">实际结束: {{item.end_time_real ? item.end_time_real.substring(0, 10) : '--'}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		projectZrrListApi,
		projectZrrInfoApi,
	} from '@/api/statistics.js';
	import {
		Workbenchrisk
	} from '@/api/project.js'
	export default {
		data() {
			return {
				total: 0,
				project_id: '',
				curTab: {
					id: 1,
					name: '执行中'
				},
				tabList: [{
						name: '执行中',
						id: 1,
						quantity: 0
					},
					{
						name: '已完成',
						id: 2,
						quantity: 0
					},
					{
						name: '待执行',
						id: 3,
						quantity: 0
					},
				],
				list: [{
					dw_name: 'testdw_name',
					children: [{
						id: 1,
						project_name: '项目名称'
					}]

				}],
				listage: [],
				expandList: [],
				curIdx: 0,
				curName: '执行中',
				// mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
			}
		},
		methods: {
			// onNavigationBarButtonTap(e){
			// 	this.
			// },
			genTotal(children) {
				let total = 0;
				children.forEach(item => {
					total += item.total;
				})
				return total;
			},
			setCurIdx(idx, name) {
				this.curIdx = idx;
				this.curName = name;
				this.expandList = [];
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
				this.fetchInfo(idx + 1)
			},
			// async expandChange(id, project_id) {
			// 	const idx = this.expandList.indexOf(id);
			// 	if (idx !== -1) {
			// 		this.expandList.splice(idx, 1);
			// 	} else {
			// 		this.expandList.push(id);
			// 	}
			// 	if (project_id) {
			// 		if (!this.list[id.split('-')[0]].children[id.split('-')[1]].children) {
			// 			this.fetchInfo(id, project_id)
			// 		}
			// 	}
			// },
			async fetchInfo(id, project_id) {
				uni.showLoading({
					title: '加载中...'
				});
				const {
					data,
					code
				} = await Workbenchrisk({
					project_id: this.project_id,
					type: this.curName === '执行中' ? 1 : id
				});
				if (code === 1) {
					let dep = JSON.parse(JSON.stringify(this.list));
					dep[id.split('-')[0]].children[id.split('-')[1]].children = data.data;
					this.list = dep;
				}
				this.listage = data.data.data
				this.total = data.data.total
				uni.hideLoading();
			},
			handleResetForm() {
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			handleSearch() {
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			//跳转		item
			onLoad(data) {
				this.project_id = uni.getStorageSync('project_id');
				this.fetchInfo(1, this.project_id)
			},
			Jump(item) {
				uni.navigateTo({
					url: '/pages/statistics/today/risk/statisticsItem?params=' + JSON.stringify(item)
				})
			},

			/*上拉加载的回调*/
			async upCallback(page) {
				const {
					data
				} = await projectZrrListApi({
					type: this.curName === '执行中' ? '' : this.curName,
					page: page.num,
					pageSize: this.pageSize
				});
				if (data.code === 1 || data.code === 200) {
					let arr = [];
					for (let key in data.data.group_list) {
						arr.push(data.data.group_list[key]);
					}
					// this.total = data.data.total;
					// 接口返回的当前页数据列表 (数组)
					let curPageData = arr;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					// let curPageLen = curPageData.length;
					let curPageLen = 1;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.group_list.last_page;
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen);
					}, 20);
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.section-0 {
		width: 100%;
		background: #2e5efe;

		// background: #fff;
		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;

			.tab {
				width: 100%;
				height: 80rpx;
				@include clear();
				background-color: #1534ce;

				.item {
					width: 33.33%;
					float: left;
					height: 80rpx;
					background-color: #1534ce;
					position: relative;

					.label {
						height: 80rpx;
						line-height: 80rpx;
						position: relative;
						z-index: 10;
						box-sizing: border-box;
						text-align: center;
						width: 100%;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #fefefe;
					}

					.shape {
						z-index: 1;
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						bottom: 0;
						left: -50rpx;
						background: #000;
						display: none;
						background-color: #fff;
						overflow: hidden;

						.shape-body {
							width: 50rpx;
							height: 50rpx;
							background-color: #1534ce;
							border-bottom-right-radius: 40rpx;
						}
					}

					.shape-mirrow {
						z-index: 1;
						left: 0;
						display: none;

						.shape-body {
							border-bottom-right-radius: 0rpx;
							border-bottom-left-radius: 40rpx;
						}
					}
				}

				.item__active {
					border-top-left-radius: 40rpx;
					border-top-right-radius: 40rpx;
					background-color: #fff;

					.label {
						color: #46464a;
					}

					.shape {
						display: block;
					}

					.shape-mirrow {
						display: none;
					}
				}

				.item__active_next {
					border-bottom-right-radius: 50rpx;

					.shape {
						display: none;
					}

					.shape-mirrow {
						display: block;
					}
				}

			}

			.list {
				.listItem {
					// align-items: center;
					// justify-content: space-around;
					line-height: 100%;
					height: 150rpx;
					background-color: #fffeff;
					margin: 30rpx;
					padding: 25rpx 30rpx 0 30rpx;
					border-radius: 50rpx;
					font-family: SourceHanSansCN-Regular;
					color: #46464A;
					box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);

					.ItemTop {
						width: 80%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 30rpx;
						color: #3B3C40;
					}

					.ItemBottm {
						color: #8E8F92;
						font-size: 25rpx;

						.ItemBottmchild {
							display: flex;
							margin-top: 10rpx;

							.left {
								flex: 50%;
							}

							.right {
								flex: 50%;
							}
						}
					}
				}

			}
		}
	}
</style>
